<template>
	<view class="history">
		<!-- 标签 -->
		<view class="tags">
			<view class="title">试卷学科</view>
			<!--标签选择-->
			<selectLabel 
				:examList="examList" 
				:topicList="topicList"
				@labelType = "getLabelType"></selectLabel>
		</view>
		<view class="topic">
			<view class="topic-item" v-for="item in examItemList" :key="item.id">
				<view class="type" :class="item.status == 2 ?'completed':''">
					<span v-if="item.status == 1">待批改</span>
					<span v-else>已完成</span>
				</view>
				<view class="topic-item-first">
					<view class="title">{{item.paperName}}</view>
					<view class="start" @click="showPaperAnswer(item.id)">查看试卷</view>
				</view>
				<view class="topic-item-second">
					<text class="">提交时间：{{item.createTime}}</text>
					<view class="info" v-if="item.isShow">
						<view>
							<text>
								试卷类型：
								<span v-if="item.paperType == 1">固定试卷</span>
								<span v-else-if="item.paperType == 2">时段试卷</span>
								<span v-else-if="item.paperType == 3">任务试卷</span>
								<span v-else-if="item.paperType == 4">班级试卷</span>
								<span v-else-if="item.paperType == 5">智能训练</span>
							</text>
							<text>正确题数：{{item.questionCorrect}}</text>
						</view>
						<view>
							<text>学科：{{item.subjectName}}</text>
							<text>自动批改：{{item.systemScore}}</text>
						</view>
						<view>
							<text>题目数量：{{item.questionCount}}</text>
							<text>最终得分：{{item.userScore}}</text>
						</view>
						<view>
							<text>试卷总分：{{item.paperScore}}</text>
							<text>耗时：{{item.doTime}}</text>
						</view>
						<view>
							<!-- <text>发布时间：{{item.pushTime}}</text> -->
						</view>
					</view>
				</view>
				<view class="isShow" @click="change(item)">{{item.isShow? "收起":"展开"}}</view>
			</view>
		</view>
		<view class="bottom" v-if="flag"> ---我是有底线的---</view>
		<goTop @goTop="goTop"></goTop>
	</view>
</template>

<script>
	import selectLabel from '@/components/selectTabel/selectTabel.vue'
	import goTop from "@/components/goTop/goTop.vue"
	export default {
		data() {
			return {
				//试卷类型标签
				examList: [],
				//学科类型标签
				topicList:[],
				//试卷列表
				examItemList:[],
				query: {
					pageIndex: 1,
					pageSize: 10,
					subjectId: null
				},
				total: 0,
				flag:false
			}
		},
		components:{
			selectLabel
		},
		onLoad(){
			//获取token
			let token = uni.getStorageSync("token");
			console.log(!token);
			if( !token){
				// uni.showToast({
				// 	title: "请先登录！！"
				// })
				uni.redirectTo ({
					url: "/pages/login/login"
				});
			}
			this.getSubjectList();
			
			this.getExamPaperAnswerList();
		},
		onReachBottom(){
			console.log("触底了");
			if(this.total <= this.examItemList.length){
				this.flag = true;
				return ;
			}
			
			this.query.pageIndex++;
			//获取试卷列表
			this.getExamPaperAnswerList();
		},
		//监听下拉刷新
		onPullDownRefresh(){
			console.log("下拉刷新了");
			//刷新数据
			this.query.pageIndex = 1;
			this.examItemList = [];
			this.flag = false;
			 //重新获取数据
			setTimeout( ()=>{this.getExamPaperAnswerList( ()=> {uni.stopPullDownRefresh()})},1000);
			
		},
		methods: {
			//获取考试记录列表
			async getExamPaperAnswerList(callback){
				const resp = await this.$myRequest({
					url: "/api/student/exampaper/answer/pageList",
					data: this.query
				})
				if(resp){
					this.examItemList = [...this.examItemList,...resp.data.data];
					this.total = resp.data.total;
				}
				callback && callback();
			},
			getLabelType(data){
				console.log(data);
				if( data.type == 2 && data.index == 0){
					this.query.subjectId = null
				}else if( data.type == 2 && data.index != 0){
					this.query.subjectId = data.index 
				}
				this.examItemList = [];
				this.query.pageIndex = 1;
				this.getExamPaperAnswerList();
			},
			//收起与展开
			change(obj){
				obj.isShow = !obj.isShow ;
				//替换数组中的某个指定对象
				this.examItemList = this.examItemList.map( item => item.id == obj.id?obj:item);
			},
			//返回顶部
			goTop(){
				console.log(0);
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
			//查询学科
			async getSubjectList(){
				const resp = await this.$myRequest({
					url: "/api/student/education/subject/list"
				})
				if( resp.data.code == 200){
					this.topicList = resp.data.obj;
				}
				this.topicList.unshift({
					id: 0,
					name: "全部"
				});
			},
			showPaperAnswer(id){
				console.log("答案id：",id);
				uni.navigateTo({
					url: "/pages/test-view/test-view?id="+id
				})
			}
		}
	}
</script>

<style lang="scss">
.history{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width:100%;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	.tags{
		width: 92%;
		margin: 20rpx 0;
		.title{
			color:#212121;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	.topic{
		width: 92%;
		font-size: 28rpx;
		color: #212121;
		margin-bottom: 20rpx;
		
		.topic-item{
			width: 100%;
			background: #fff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 70rpx 30rpx 20rpx 30rpx;
			margin-top: 40rpx;
			position: relative;
			
			.type{
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				right: 0;
				top: 0;
				width: 20%;
				background: #FCEFDB;
				color:#E6A23C;
				padding: 8rpx 20rpx;
				border-radius:  0 20rpx 0 20rpx;
				
			}
			.completed{
				color: #fff;
				background: #66BB6A;
			}
			.topic-item-first{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.title{
					font-size: 32rpx;
					color:#212121;
				}
				.start{
					color:#66BB6A;
					letter-spacing: 2rpx;
				}
			}
			.topic-item-second{
				margin-top: 24rpx;
				.info{
					view{
						display: flex;
						text{
							flex: 1;
						}
					}
				}
				text{
					margin-top: 12rpx;
				}
			}
			.isShow{
				color:#66BB6A;
				display: flex;
				justify-content:flex-end;
				align-items: center;
			}
		}
		.topic-item:first-child{
			margin-top: 10rpx;
		}
	}
	.bottom{
		font-size: 28rpx;
		color:#BFBFBF;
	}
}
</style>
